import { ParentTreePathItemType } from '@/types/workflow/node';
import React, { useMemo } from 'react';
import { t } from '@/locales/i18n';

const ParentPaths = (props: {
  paths?: ParentTreePathItemType[];
  rootName?: string;
  FirstPathDom?: React.ReactNode;
  onClick: (parentId: string) => void;
  fontSize?: string;
}) => {
  const {
    paths = [],
    rootName = t('common.folder.Root Path'),
    FirstPathDom,
    onClick,
    fontSize,
  } = props;
  const concatPaths = useMemo(
    () => [
      {
        parentId: '',
        parentName: rootName,
      },
      ...paths,
    ],
    [rootName, paths],
  );

  console.log('concatPaths : ', concatPaths);
  

  return paths.length === 0 && !!FirstPathDom ? (
    <>{FirstPathDom}</>
  ) : (
    <div className="flex -ml-2 flex-1">
      {concatPaths.map((item, i) => (
        <div className="flex items-center" key={item.parentId || i}>
          <div
            className={`rounded-md px-2 py-1 text-sm ${
              i === concatPaths.length - 1
                ? 'cursor-default font-bold text-gray-700'
                : 'cursor-pointer text-gray-600 hover:bg-gray-100'
            }`}
            {...(i === concatPaths.length - 1
              ? {
                }
              : {
                  onClick: () => {
                    onClick(item.parentId);
                  },
                })}
          >
            {item.parentName}
          </div>
          {i !== concatPaths.length - 1 && (
            <div className='mx-1 text-gray-600' >
              /
            </div>
          )}
        </div>
      ))}
    </div>
  );
};

export default React.memo(ParentPaths);
